<script setup lang="tsx">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import mockjs from 'mockjs'
import { reactive } from 'vue'
import BaseTable, { type Column } from 'vue-table/vue3'
let columns: Column[] = reactive([])
let mockBase: Record<string, any> = {
  'id|+1': 1
}
for (let i = 0; i < 50; i++) {
  columns.push({
    label: '字段' + i,
    prop: 'prop' + i,
    width: i % 2 === 1 ? 220 : 50,
    template: ({ row }) => {
      return (
        <div style={{ width: '50px' }}>
          <input class="el-input__inner" v-model_lazy={row['prop' + i]}></input>
        </div>
      )
    }
  })
  mockBase['prop' + i] = '21'
}

columns.unshift({
  label: '左侧固定列2',
  fixed: 'left',
  template: ({ rowIndex }) => rowIndex + 1,
  prop: ''
})
columns.unshift({
  label: '左侧固定列',
  fixed: 'left',
  template: ({ rowIndex, row }) => {
    return `序号：${rowIndex + 1}，内容：${JSON.stringify(row)}`
  },
  prop: ''
})
columns.push({
  label: '右侧固定列',
  fixed: 'right',
  template: ({ rowIndex }) => rowIndex + 1,
  prop: ''
})
columns.push({
  label: '右侧固定列2',
  fixed: 'right',
  template: ({ rowIndex }) => rowIndex + 1,
  prop: ''
})
// columns.push({
//   label: '切换',
//   type: 'expand',
//   prop: 'c',
//   fixed: 'left',
//   width: 100
// })
let data: { list: any[] } = reactive(
  // mockjs.mock({
  //   'list|50': [mockBase]
  // })
  {
    list: [
      {
        id: '1',
        children: [
          {
            id: '1-1',
            children: [
              {
                id: '1-1-1'
              }
            ]
          }
        ]
      }
    ]
  }
)
let expand = ({ row }: { row: any }) => {
  console.log('执行', JSON.stringify(row))

  return <div>自定义内容{JSON.stringify(row)}</div>
}
</script>

<template>
  <div style="width: 100%; height: 600px">
    <BaseTable
      :addon-renders="{
        expandRender: expand
      }"
      :columns="columns"
      :table-data="data.list"
    ></BaseTable>
  </div>
</template>

<style scoped></style>
